<template>
  <div class="login-register">
    <van-form
      @failed="onFailed"
      @submit="onSubmit"
      validate-first
      scroll-to-error
      ref="myform"
      @input="onInputForm"
    >
      <van-cell-group inset>
        <van-field
          v-model="phone"
          name="phone"
          label="手机号码"
          placeholder="请输入您的手机号码"
          :rules="[
            { pattern, message: '请输入正确的手机号码' },
            { required: true, message: '请填写用户名' },
          ]"
        />
        <van-field
          v-model="code"
          label="验证码"
          name="code"
          placeholder="请输入短信验证码"
          :rules="[{ required: true, message: '请输入短信验证码' }]"
        >
          <template #button>
            <div class="code-btn-wrap">
              <van-button
                :class="[isActive ? 'actvie' : 'code-btn']"
                size="small"
                type="primary"
                @click="toGetCode"
              >
                {{ isActive ? "获取验证码" : count + "s后重新发送" }}
              </van-button>
            </div>
          </template>
        </van-field>
        <van-field
          v-model="password"
          :type="showPassword ? 'text' : 'password'"
          name="password"
          label="密码"
          placeholder="请输入密码"
          @click-right-icon="showPassword = !showPassword"
          :right-icon="showPassword ? 'eye-o' : 'closed-eye'"
          :rules="[{ required: true, message: '请输入密码' }]"
        />
        <van-field
          v-model="checkPassword"
          :type="showCheckPassword ? 'text' : 'password'"
          name="checkPassword"
          label="确认密码"
          placeholder="请再次输入密码"
          @click-right-icon="showCheckPassword = !showCheckPassword"
          :right-icon="showCheckPassword ? 'eye-o' : 'closed-eye'"
          :rules="[{ required: true, message: '请再次输入密码' }]"
        />
        <van-field
          v-model="inCode"
          name="inCode"
          label="邀请码"
          placeholder="请输入邀请码（选填）"
        />
      </van-cell-group>
      <div class="btn">
        <van-button
          color="#3070F0"
          :disabled="allW"
          round
          block
          type="primary"
          native-type="submit"
        >
          注册
        </van-button>
      </div>
    </van-form>
    <p class="tip">
      <img
        :src="agree ? '/src/images/icon_a.png' : '/src/images/icon_ua.png'"
        @click="agree = !agree"
      />
      <span>我已阅读并同意</span
      ><a href="https://baidu.com">《用户隐私协议政策》</a>
    </p>
  </div>
</template>

<script>
import { ref } from "vue";
import { Toast } from "vant";
export default {
  setup() {
    const scs = 60;
    const phone = ref("");
    const code = ref("");
    const password = ref("");
    const checkPassword = ref("");
    const inCode = ref("");
    const showPassword = ref(false);
    const showCheckPassword = ref(false);
    const agree = ref(false);
    const allW = ref(true);
    let count = ref(scs);
    let isActive = ref(true);

    const pattern = /^1[345678]\d{9}/;
    const onFailed = (errorInfo) => {
      console.log("failed", errorInfo);
    };
    const onSubmit = (values) => {
      if (checkPassword.value !== password.value) {
        Toast("密码确认错误");
        return;
      }
      if (!agree.value) {
        Toast("请购选隐私协议政策");
        return;
      }
      console.log("submit", values);
    };
    const toGetCode = () => {
      if (!phone.value || !isActive.value) {
        Toast("请输入您的手机号码");
        return;
      } else {
        isActive.value = false;
        let timer = setInterval(() => {
          if (count.value <= 0) {
            clearInterval(timer);
            isActive.value = true;
            count.value = scs;
          }
          count.value > 0 ? count.value-- : "";
        }, 1000);
      }
    };
    const onInputForm = (values) => {
      if (phone.value && code.value && password.value && checkPassword.value) {
        allW.value = false;
      } else {
        allW.value = true;
      }
    };
    return {
      phone,
      code,
      password,
      checkPassword,
      inCode,
      pattern,
      isActive,
      showPassword,
      showCheckPassword,
      agree,
      count,
      allW,
      onFailed,
      onSubmit,
      toGetCode,
      onInputForm,
    };
  },
};
</script>

<style lang="less">
.login-register {
  padding: 0 24px;
  .van-cell-group {
    margin: 0;
    .van-cell__value {
      color: #999;
    }
  }

  .van-cell:last-child::before {
    position: absolute;
    box-sizing: border-box;
    content: " ";
    pointer-events: none;
    right: 0;
    left: 0;
    bottom: 0px;
    border-bottom: 1px solid #ebedf0;
    transform: scaleY(0.5);
  }
  .code-btn-wrap {
    display: flex;
    button {
      font-size: 12px;
      border: none;
      border-radius: 17px;
      align-items: center;
      height: 28px;
    }
    .code-btn {
      background: #ebedf0;
      color: #a8acb3;
      padding: 0 9.5px;
    }
    .actvie {
      background: rgba(48, 112, 240, 0.1);
      color: #3070f0;
    }
  }

  .van-field__control {
    color: #25282d;
    font-size: 16px;
  }
  .van-field {
    padding: 0;
    .van-icon {
      font-size: 24px;
    }
    .van-field__label,
    .van-field__control {
      height: 55px;
      line-height: 55px;
      font-size: 16px;
    }
    .van-field__label {
      width: 64px;
      margin-right: 24px;
    }

    label {
      font-size: 16px;
      color: #25282e;
    }
  }
  .van-cell::after,
  .van-cell::before {
    right: 0;
    left: 0;
    border-color: #ebedf0 !important;
  }
  .btn {
    margin: 39.5px 0 14px;
    button {
      height: 50px;
      font-size: 18px;
    }
  }
  .tip {
    font-size: 12px;
    display: flex;
    justify-content: start;
    align-items: center;
    img {
      width: 14px;
      height: 14px;
      margin-right: 6px;
      vertical-align: middle;
    }
    span {
      color: #a8acb3;
    }
    a {
      color: #3070f0;
    }
  }
}
</style>
